<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="line-height:20px;text-align: center;height: 100%">
    <el-tab-pane
        v-for="labels in labelName"
        :label="labels.name"
        :name="labels.num"
        :key="labels.num">
      <myOrders :number="labels.number"></myOrders>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import myOrders from "@/views/backStore/Myorders.vue";
export default {
  data() {
    return {
      activeName: 'first',
      labelName:[
        {
          name:"全部订单",
          num:"first",
          number:0
        },
        {
          name:"待付款",
          num:"second",
          number:1
        },
        {
          name:"已完成/待评价",
          num:"third",
          number:3
        },
        {
          name:"已评价",
          num:"fourth",
          number:4
        },
        {
          name:"已取消",
          num:"fifth",
          number:5
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  components:{
    myOrders,
  },
};
</script>

<style scoped>
.one{
  height: 50px;
  width: 100%;;
}
::v-deep .el-tabs__content{
  height: 90%;
}
::v-deep .el-tab-pane{
  height: 100%;
}
</style>